<template>
	<view class="page">
		<!-- <view class="cu-custom" v-if="user.isLogin">
			<view class="cu-bar fixed cuImg" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px'
			}">
				<view class="contents fixed" :style="{top: ($wanlshop.wanlsys().top) - 6 + 'px'}" @tap="$wanlshop.auth('/pages/restaurant/user/store/store')">
					<view class="contentText" :style="{color:`#333`}">{{common.store.name}}</view>
					<uni-icons type="right" size="20" :color="`#333`"></uni-icons>
				</view>
			</view>
		</view> -->
		
		<s-navbar ref="hxnb" :config="config" style="position: relative;">
			<view slot="left" style="height: 100%;">
				<view style="height: 100%;" class="address flex align-center padding-left-sm" @tap="$wanlshop.auth('/pages/restaurant/user/store/store')">
					<text style="font-size: 32rpx;color: #333;" v-if="user.isLogin">{{common.store && common.store.name}}</text>
					<uni-icons type="right" size="20" :color="`#333`" v-if="user.isLogin"></uni-icons>
				</view>
			</view>
		</s-navbar>
		
		<image src="/static/restaurant/user/bg.png" mode="scaleToFill"></image>

		<view class="card">
			<view class="userInfo" @tap="$wanlshop.auth('/pages/restaurant/user/user/info')">
				<image :src="$wanlshop.oss(user.avatar)" mode="aspectFill" v-if="user.isLogin"></image>
				<image src="/static/logo.jpg" mode="aspectFill" v-else></image>
				<view class="info">
					<text class="text-cut-1">{{user.isLogin ? user.nickname : '请登录'}}</text>
				</view>
			</view>
			<view class="money">
				<view class="item" @tap="$wanlshop.auth('/pages/restaurant/user/money/money')">
					<text class="m">{{userInfo && userInfo.money && userInfo.money.money1 || '0.00'}}</text>
					<text>余额</text>
				</view>
				<view class="item" @tap="$wanlshop.auth('/pages/restaurant/user/coupons/my')">
					<text>{{userInfo && userInfo.usableCoupon || 0}}</text>
					<text>优惠劵</text>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @tap="tap(item,index)">
				<image :src="$wanlshop.oss(item.icon)" mode="widthFix"></image>
				<view class="right">
					<text>{{item.name}}</text>
					<image src="/static/restaurant/user/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="cloture" @tap="logout" v-if="user.isLogin">
			<text>退出登录</text>
		</view>

		<u-tabbar v-model="currentTab" :list="listTab" active-color="#FA802A" @change="jump"></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo:null,
				currentTab: 1, // 底部
				listTab: [{
						"pagePath": "/pages/restaurant/index",
						"iconPath": "/static/restaurant/tabbar/index.png",
						"selectedIconPath": "/static/restaurant/tabbar/indexHL.png",
						"text": "首页"
					}, 
					{
						"pagePath": "/pages/restaurant/user",
						"iconPath": "/static/restaurant/tabbar/my.png",
						"selectedIconPath": "/static/restaurant/tabbar/myHL.png",
						"text": "我的"
					}
				], // 底部
				config:{
					title: "",
					leftSlot:true,
					back:false,
					backgroundColor:'transparent',
					backgroundImg: '/static/restaurant/user/bg.png'
				},
				list: [{
						icon: '/static/restaurant/user/icon1.png',
						name: '个人信息',
						url: '/pages/user/setting/user'
					},
					// {
					// 	icon: '/static/restaurant/user/icon2.png',
					// 	name: '修改密码',
					// 	url: '/pages/user/setting/editPwd'
					// },
					// {
					// 	icon: '/static/restaurant/user/icon3.png',
					// 	name: '补贴记录',
					// 	url: '/pages/user/money/subsidy'
					// },
					{
						icon: '/static/restaurant/user/icon4.png',
						name: '实名认证',
						url: '/pages/user/setting/verified'
					},
					{
						icon: '/static/restaurant/user/icon5.png',
						name: '账户充值',
						url: '/pages/restaurant/user/money/recharge'
					},
					{
						icon: '/static/restaurant/user/icon6.png',
						name: '我的订单',
						url: '/pages/restaurant/user/order/order'
					},
					{
						icon: '/static/restaurant/user/icon7.png',
						name: '收货地址',
						url: '/pages/user/envelope/address'
					},
					{
						icon: '/static/restaurant/user/icon8.png',
						name: '优惠劵',
						url: '/pages/restaurant/user/coupons/coupons'
					}
				]
			}
		},
		computed: {
			...mapState(['user','common'])
		},
		methods: {
			jump(e) {
				uni.redirectTo({
					url: this.listTab[e].pagePath
				})
			},
			tap(data,index) {
				// if(index == 1) {
				// 	if(this.user.apply_status == 0 || this.user.apply_status == 3) {
				// 		this.$wanlshop.auth('/pages/restaurant/user/user/idcard')
				// 	} else {
				// 		this.$wanlshop.auth('/pages/restaurant/user/user/realname')
				// 	}
				// } else {
				// 	this.$wanlshop.auth(data.url)
				// }
					this.$wanlshop.auth(data.url)
			},
			async getStore() {
				let res = await this.$api.getStore({
					storeid: this.common.store && this.common.store.id
				});
				if (res.code == 1) {
					this.storeInfo = res.data;
					this.$store.dispatch('common/setStore', res.data);
				}
			},
			async getUserInfo() {
				let res = await this.$api.getUserInfo();
				if (res.code == 1) {
					this.userInfo = res.data
					// this.$store.dispatch('user/login', res.data);
				}
			},
			async logout() {
				uni.showModal({
					title: '提示',
					content: '是否确认退出登录？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.logout();
							if (res.code == 1) {
								this.$wanlshop.msg('退出登录成功')
								this.$store.dispatch('user/logout');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		onShow() {
			// if (this.user.isLogin) {
				this.getUserInfo()
				// this.getStore()
			// }
		}
	}
</script>
<style lang="less">
	page {
		background-color: #fff;
	}
</style>
<style lang="less" scoped>
	.contents {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
		font-size: 32rpx;
	}
	.page {
		position: relative;
		>image {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.card {
			position: relative;
			margin: 0 auto;
			margin-top: 80rpx;
			width: 702rpx;
			height: 326rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(240, 194, 152, 0.47), 0rpx 2rpx 4rpx 0rpx #F0C298;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;

			.userInfo {
				padding: 0 36rpx;
				display: flex;
				justify-content: flex-start;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					margin-top: -50rpx;
				}

				.info {
					padding-left: 34rpx;
					padding-top: 18rpx;
					width: calc(100% - 150rpx);
					text {
						color: #333333;
						font-size: 36rpx;
					}
				}
			}

			.money {
				flex: 1;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.item {
					align-items: center;
					display: flex;
					flex-direction: column;

					text {
						display: inline-block;

						&:nth-child(1) {
							color: #FA802A;
							font-size: 50rpx;
							position: relative;
							font-weight: 500;
						}
						&.m {
							&::after {
								display: inline-block;
								content: "元";
								color: #FA802A;
								font-size: 22rpx;
							}
						}

						&:nth-child(2) {
							color: #333333;
							font-size: 32rpx;
							margin-top: 12rpx;
						}
					}
				}
			}
		}

		.list {
			width: 702rpx;
			border-radius: 16rpx;
			margin: 20rpx auto;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(240, 194, 152, 0.47), 0rpx 2rpx 4rpx 0rpx #F0C298;
			position: relative;
			z-index: 9;
			background-color: #fff;
			.item {
				display: flex;
				justify-content: flex-start;
				height: 100rpx;
				align-items: center;
				// width: 100%;
				padding: 0 20rpx;
				&:last-child {
					.right {
						border-bottom: none;
					}
				}

				>image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 16rpx;
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;
					height: 100rpx;
					border-bottom: 1rpx solid #E0E0E0;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.cloture {
			width: 100%;
			height: 40rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			margin-top: 60rpx;

			text {
				color: #969799;
				font-size: 28rpx;
				position: relative;
				display: flex;

				&::after,
				&::before {
					position: absolute;
					display: inline-block;
					content: "";
					width: 74rpx;
					height: 2rpx;
					background: linear-gradient(270deg, rgba(200, 201, 204, 1), rgba(200, 201, 204, 0));
				}

				&::before {
					left: -90rpx;
					top: 50%;
				}

				&::after {
					right: -90rpx;
					top: 50%;
					background: linear-gradient(270deg, rgba(200, 201, 204, 0), rgba(200, 201, 204, 1));
				}
			}
		}
	}
</style>